<template>
	<view>
		<view class="sizeChange">
			<button class="button" @click="increaseFontSize">字体增大</button>
			<button class="button" @click="decreaseFontSize">字体减小</button>
		</view>
		<view class="" :style="{ fontSize: fontSize + 'rpx' }">
			<view class="text">
				示例：某煤矿发生一起重大水害事故,造成21人死亡、1人下落不明,直接经济损失6
				689万元。该起事故的直接原因为:该矿非法越界开采A煤矿三号井保安煤柱,掘进工作面不进行探放水作业,冒险蛮干,爆破贯通采空区积水,诱发透水,造成事故。请根据上述资料选择:该矿隐蔽致灾因素普查工作未开展。建立隐蔽致灾因素普查治理机制,要(　　)。
			</view>
			<view class="text">
				A.制订水害治理中长期规划
			</view>
			<view class="text">
				B.对每个煤矿的老空区积水划定警戒线和禁采线
			</view>
			<view class="text">
				C.落实和完善预防性保障措施
			</view>
			<view class="">
				D.进行区域性水害普查治理
			</view>
		</view>
		<view class="">
			<button class="btn" @click="Submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import userApi from '@/api/user'
	export default {
		data() {
			return {
				fontSize: 28 // 默认字体大小
			}
		},
		methods: {
			increaseFontSize() {
				this.fontSize += 4; // 每次点击增加2px
				console.log(this.fontSize)
			},
			decreaseFontSize() {
				if (this.fontSize > 8) { // 防止字体过小
					this.fontSize -= 4; // 每次点击减少2px
				}
				console.log(this.fontSize)
			},
			Submit() {
				userApi.fontSizeSet(
					this.fontSize
				).then((res) => {
					if (res.code == 1) {
						uni.showToast({
							title: '字体大小设置成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.sizeChange {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.button {
		font-size: 50rpx;
		width: 40%;
		height: 50rxp;
	}

	.text {
		margin-bottom: 20rpx;
	}

	.btn {
		width: 80%;
		background-color: #68bfd6;
		margin-left: 10%;
		position: fixed;
		bottom: 50rpx;
	}
</style>